Skip to content
lab components / Overlay

Side panel

Enables focused interaction with specific tasks or information without losing sight of the main content.

ExamplesPropertiesGuidelines

This is a Lab component!

That means it doesn't satisfy our definition of done and may be changed or even deleted. For an exact status, please reach out to the Fancy team through the dev_fancy or ux_fancy channels.

import { SidePanel } from "@siteimprove/fancylab";

#Examples

SidePanel is a a container element that overlays the main content area, typically anchored to the right side of the screen. It is designed to provide additional context, tools, or actions related to the current view. It includes a header with a close button, the main content area, and an optional footer. The Side Panel consists of:

  • Container: The overall panel structure.
  • Header:
    • Title with optional tooltip for clarity
    • Clear close button for immediate dismissal
  • Content area: Flexible space for the panel's main purpose (forms, details, etc.).
  • Footer (optional): Fixed area for actions.

#Default

Use Cases: Displaying forms, detailed information, or configuration options.

Best Practices:

  • Side panels should enhance, not interrupt, the main experience.
  • Keep some of the main page content visible for context.
const [showSidePanel, setShowSidePanel] = useState(false); return ( <> <Button aria-haspopup="dialog" onClick={() => setShowSidePanel(true)}> Trigger side panel </Button> <SidePanel shown={showSidePanel} headerTitle="Header text" onClose={() => setShowSidePanel(false)} > <Content> <Paragraph> Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nemo repellendus obcaecati praesentium illo, voluptate fugiat quisquam vitae nostrum modi earum eos nesciunt at, placeat sint vel quas quae aliquid. </Paragraph> </Content> </SidePanel> </> );

#Header with tooltip

Adds a tooltip to the header title for additional context or instructions.

Use Cases: When the header title needs clarification.

Best Practices:

  • To add a tooltip to the header you must use the headerTitleTooltipText prop to ensure proper accessibility. Do not add the Tooltip component to the headerTitle prop.
  • If you need to change the placement of the tooltip you can use the headerTitleTooltipPlacement prop.
const [showSidePanel, setShowSidePanel] = useState(false); return ( <> <Button aria-haspopup="dialog" onClick={() => setShowSidePanel(true)}> Trigger side panel </Button> <SidePanel shown={showSidePanel} headerTitle="Header text with tooltip" headerTitleTooltipText="Lorem ipsum dolor sit amet consectetur adipisicing elit." headerTitleTooltipPlacement="bottom" onClose={() => setShowSidePanel(false)} > <Content> <Paragraph> Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nemo repellendus obcaecati praesentium illo, voluptate fugiat quisquam vitae nostrum modi earum eos nesciunt at, placeat sint vel quas quae aliquid. </Paragraph> </Content> </SidePanel> </> );

Includes a sticky footer within a Side panel, often used for action buttons.

Use Cases: Presenting actions (e.g., "Save," "Cancel") to confirm choices, submit information, or navigate steps.

Best Practices:

  • Side panels can optionally contain a (sticky) footer. This section is intended for information and actions that relate to the SidePanel as a whole. In most cases, that will be the Action Bar component, which provides users with a set of actions related to the completion of a task.
  • Add a footer by placing a SidePanel.Footer component inside a SidePanel as its last child.
const [showSidePanel, setShowSidePanel] = useState(false); return ( <> <Button aria-haspopup="dialog" onClick={() => setShowSidePanel(true)}> Trigger side panel </Button> <SidePanel shown={showSidePanel} headerTitle="Header text" onClose={() => setShowSidePanel(false)} > <Content> <Paragraph> Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nemo repellendus obcaecati praesentium illo, voluptate fugiat quisquam vitae nostrum modi earum eos nesciunt at, placeat sint vel quas quae aliquid. </Paragraph> </Content> <SidePanel.Footer> <ActionBar primary={{ children: "Confirm", onClick: () => setShowSidePanel(false) }} cancel={{ children: "Cancel", onClick: () => setShowSidePanel(false) }} /> </SidePanel.Footer> </SidePanel> </> );

#Dropzone

Controls where the SidePanel is rendered in the DOM.

Use Cases: When you need control over the SidePanel's placement within the page structure.

Best Practices:

  • By default, side-panel is appended to the DOM in the bottom of <body>.
  • DialogDropzone lets you to control where in the DOM the side-panel is rendered, allowing it to inherit styles, if you don't use a global stylesheet.
<DialogDropzone />

#Properties

PropertyDescriptionDefinedValue
shownRequired
booleanIndicates whether the side panel is shown or not
onCloseRequired
functionCallback for when the close button is clicked
childrenOptional
elementContent of the side panel
onUnmountOptional
functionCallback for when the side panel is unmounted
classNameOptional
stringCustom className that's applied to the outermost element (only intended for special cases)
styleOptional
objectStyle object to apply custom inline styles (only intended for special cases)
headerTitleOptional
element
headerTitleTooltipTextOptional
| string | number | element
headerTitleTooltipPlacementOptional
"bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"
idOptional
string
headerIconOptional
element
hideCloseOptional
boolean
data-observe-keyOptional
stringUnique string, used by external script e.g. for event tracking

#Guidelines

#Best practices

#General

Use SidePanel to

  • Display detailed information.
  • Provide navigation options.
  • Offer quick actions or tools.
  • Offer contextual assistance or instructions.

#Placement

SidePanel typically includes the following elements:

  • Table / List table details: When a user selects an item in a table or list and requires access to more comprehensive information without navigating away.
  • Task-specific actions: When specific actions or tools are needed for a particular item or task, keeping the user's focus within the same view.
  • Configuration tools: Offering settings or customization options for a particular element or feature without disrupting their current workflow.

#Style

  • Siteimprove Design System: Adhere to Siteimprove's guidelines for color, typography, and spacing. If you are not using a component from Fancy, match the styling of your SidePanel to existing components for visual consistency.
  • Only include information or actions directly relevant to the current task. Avoid cluttering the side panel.
  • Dim the main content to create a visual hierarchy. This helps users distinguish the side panel from the main content and guides the user's eye.
  • Favor a vertical layout with clear sections and headings. Use collapsible elements (like accordions) to manage longer content without horizontal overflow.

#Interaction:

  • Make it obvious how to open and close the side panel. Use intuitive icons, labels (e.g., button click).
  • The side panel should partially overlay the main content, maintaining context and preventing the user from feeling disoriented.
  • Ensure a smooth, non-jarring transition as the side panel enters and exits the viewport.
  • Offer multiple ways to dismiss the side panel:
    • A prominent close button (usually in the top-right corner)
    • Clicking outside the panel
    • Pressing the Escape key (keyboard accessibility)
  • If the content exceeds the available height, implement smooth scrolling within the side panel. Avoiding horizontal scrolling.
  • Ensure the side panel adapts gracefully to smaller screens by leveraging Grid and Grid.Section Consider using a different layout or collapsing non-essential elements on mobile devices.

#Do not use when

  • The content is critical to the primary task flow and should not be hidden behind a panel.
  • The content demands full-screen display. A Modal or separate page may be more appropriate.

#Accessibility

#For designers

  • Ensure sufficient color contrast, clear focus states, and intuitive interactions.

#For developers

This component comes with built-in accessibility, no extra work required.

Explore detailed guidelines for this component: Accessibility Specifications

#Writing

  • Keep text concise and to the point. Avoid long sentences and paragraphs. Use bullet points and short phrases whenever possible.
  • Use clear headings and visual hierarchy.
  • Ensure that the text in the side panel can be easily localized.
  • Write labels and instructions that are action-oriented and guide the user towards a specific goal.
  • Ensure that all text is relevant to the content or task presented in the side panel.
  • Maintain consistency in tone, voice, and terminology across all side panels.

#Content to avoid:

  • Content that is not directly relevant to the current context.
  • Overly detailed or complex information.
  • Marketing or promotional content unless it is highly targeted and relevant to the user's current task.
  • Avoid cramming too many unrelated topics into a single side panel.
  • Avoid jargon and technical terms that users may not be familiar with.
  • Avoid generic or vague language.